<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>createElement用法</title>
</head>
<body>
<div id="app">
    <my-component></my-component>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
    // createElement(
    //     // {String | Object |Function}
    //     // 一个HTML标签，组件选项，或者一个函数
    //     // 必须Return上述其中的一个
    //     'div',
    //     //{Object}
    //     //一个对应属性的数据对象，可选
    //     //你可以在template中使用
    //     {
    //         //和v-bind:class一样的API
    //         'class': {
    //             foo: true,
    //             bar: false
    //         },
    //         //和v-bind:style一样的API
    //         style: {
    //             color: 'red',
    //             fontSize: '14px'
    //         },
    //         //正常的HTML特性
    //         attrs: {
    //             id: 'foo'
    //         },
    //         //组件props
    //         props: {
    //             myProp: 'bar'
    //         },
    //         //DOM属性
    //         domProps: {
    //             innerHTML: 'baz'
    //         },
    //         //自定义事件监听器“on”
    //         //不支持如v-on:keyup.enter的修饰器
    //         //不需要手动配置keyCode
    //         on: {
    //             click: this.clickHandler
    //         },
    //         //仅对于组件，用于监听原生的事件，而不是组件使用vm.$emit触发的自定义事件
    //         nativeOn: {
    //             click: this.nativeClickHandler
    //         },
    //         //自定义指令
    //         directives: [
    //             {
    //                 name: 'my-custom-directive',
    //                 value: '2',
    //                 expression: '1+1',
    //                 modifiers: {
    //                     bar: true
    //                 }
    //             }
    //         ],
    //         //作用域slot
    //         //{ name: props => VNode | Array<VNode> }
    //         scopedSlots: {
    //             default: props => h('span',props.text)
    //         },
    //         //如果子组件有定义slot的名称
    //         slot: 'name-of-slot',
    //         //其他特殊顶层属性
    //         key: 'myKey',
    //         ref: 'myRef'
    //     },
    //     //{String | Array}
    //     //子节点（VNodes），可选
    //     [
    //         createElement('h1','hello world'),
    //         createElement(MyComponent,{
    //             props:{
    //                 someProp: 'foo'
    //             }
    //         }),
    //         'bar'
    //     ]
    // );


    // Vue.component('MyComponent',{
    //     template:"<div id='mycomponent' :class='{show:show}' @click='handleClick'>文本内容</div>",
    //     data: function () {
    //         return {
    //             show: true
    //         }
    //     },
    //     methods: {
    //         handleClick: function () {
    //            alert("it has clicked!")
    //         }
    //     }
    // });
    // var app = new Vue({
    //     el: "#app"
    // })

    Vue.component('my-component',{
        render: function (createElement) {
            return createElement(
                'div',
                {
                    //普通html的特性
                    attrs:{
                        id: 'mycomponent'
                    },
                    // 'class': {
                    //     show: this.show
                    // },
                    //动态绑定class，同:class
                    class: {
                        'show': this.show
                    },
                    //给div绑定click事件
                    on: {
                        click: this.handleClick
                    },
                    //定义DOM节点
                    domProps: {
                        innerHTML: '文本内容'
                    }
                }
            )
        },
        data: function () {
            return {
                show: true
            }
        },
        methods: {
            handleClick: function () {
              alert("yes,it has clicked!")
            }
        }
    });
    var app = new Vue({
        el:"#app"
    })
</script>
</body>
</html>
